<template>
  <div class="scrollable-div scroll-wrapper" v-loading.body="loading">
    <div class="header">
        <p style=" font-size: 25px;padding-top: 50px;">{{ article.title }}</p>
        <p class="date" style="padding-top: 50px;">
          <span> <i class="el-icon-date"></i>发布日期: {{ article.createTime }}</span>
          <span><i class="el-icon-user"></i>作者: {{article.author}}</span>
          <span ><i class="el-icon-star-on"></i>收藏人数: {{ collect }}</span>
          <span style="cursor: pointer" @click="addCollect">(点击收藏)</span>
        </p>
    </div>
    <div class="content" ref="content">
      <!--<p v-for="(paragraph,index) in paragraphs" :key="index">{{paragraph}}</p>-->
      
    </div>
  </div>
</template>

<script>
import bus from "@/assets/js/bus";
import axios from "axios";
export default {
  name: "Article",
  data(){
    return{
      loading: false,
      menu:[],
      article:{},
      collect:''
    }
  },
  computed: {
    id(){
      return this.$route.params.id
    },
    paragraphs(){
      return this.article.content.split('/n/n')
    }
  },
  methods: {
    //初始化文章
    initArticle(){
      //加载动画
      this.loading = true
      axios.get('/FinancialRecommend/article/query?articleId='+this.id)
      .then(response => {
        this.article = response.data.data
        //先去出掉所有的/t/t
        this.article.content = this.article.content.replace(/\\t\\t/g, "")
        this.article.content = this.article.content.replace(/\\t/g, "")
        this.$refs.content.innerHTML = `<p>${this.article.content}</p>`; // 使用 <p> 标签
        // 通过 JavaScript 获取所有 <p> 标签
        const paragraphs = document.querySelectorAll('.content p');
        // 为每个 <p> 标签添加样式
        paragraphs.forEach(paragraph => {
          paragraph.style.textIndent = '2em';
          paragraph.style.lineHeight = '40px';
          // 添加更多样式属性
        });
      })
      setTimeout(()=>{
        this.loading = false
      },500)
    },
    getCollect(){
      axios.get('/FinancialRecommend/article/collect?articleId='+this.id)
      .then(response => {
        this.collect = response.data.data
      })
    },
    addCollect(){
      axios.get('/FinancialRecommend/article/addCollect?userId='+localStorage.getItem("UID")+'&articleId='+this.article.articleId)
      .then(response => {
        let type = ''
        this.getCollect()
        console.log(response)
        if (response.status === 200){
          type = 'success'
        }else{
          type = 'warning'
        }
        this.$message({
          message: response.data.msg,
          type: type
        })
      })
    }
  },
  watch: {
    id(){
      this.initArticle()
      this.getCollect()
    },
  },
  created() {
    this.initArticle()
    this.getCollect()
  },
  mounted() {
  },
  
}
</script>

<style lang="less" scoped>
.scroll-wrapper {
  margin: 0 auto;
  height: 685px; /* Set the height of your scrollable div */
  width: 900px;
  overflow-y: auto; /* Enable vertical scrollbar when content overflows */
  //border-right: 1px solid black
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.scroll-wrapper::-webkit-scrollbar{
  display: none;
}
.scrollbar-wrap {
  overflow: auto; /* 显示滚动条 */
  width: 336px;
  height: 90vh;
  background-color: skyblue;
}
.header{
  height: 200px;
  //background-color: red;
  text-align: center;
  padding: 0 100px;
  //box-shadow:  0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
p{
  font-family: "钉钉进步体 Regular";
  font-weight: bolder;
  user-select: none;
}
.date{
  font-size: 15px;
  font-weight: lighter;
}
span{
  margin-right: 20px;
}
.content{
  min-height: 800px;
  width: 100%;
  padding: 30px;
  box-sizing: border-box;
  font-weight: lighter;
  p{
    text-indent: 2em;
    line-height: 40px;
  }
}
.paragraph{
  margin-top: 10px;
}
</style>
